<template>
    <a-card>
      <section class="filter-bar mb-16">
        <span class="label">活动名称：</span>
        <a-input class="mr-24 w-300" allow-clear placeholder="请输入活动简称或全称" v-model="name" @pressEnter="search" maxLength="50"/>
        <a-button type="primary" @click="search">查询</a-button>
        <a-button class="ml-8" @click="reset">重置</a-button>
        <a-button style="float: right" type="primary" icon="plus"
                  @click="$refs.createOrEdit.createOrEditData(null)">新建
        </a-button>
      </section>
      <a-table
        class="table-con"
        row-key="id"
        :loading="loading"
        :columns="columns"
        :data-source="data"
        :pagination="pagination"
      >
       
        <template #preferentialInfo="val, data">
            <section >
                    <div v-for="(item,index) in val" :key="index">{{item}}</div>
            </section>
        </template>
        <template #createTime="val, data">
            <section >
                    <div>下单时间范围：{{data.orderTimeStart}}-{{data.orderTimeEnd}}</div>
					 <div>取车时间范围：{{data.pickupTimeStart}}-{{data.pickupTimeEnd}}</div>
					  <div v-if="data.returnTimeEnd">还车时间范围：{{data.returnTimeStart}}-{{data.returnTimeEnd}}</div>
            </section>
        </template>
       
              <template #isEnabled="val,data">
                  <section  class="enabled-con">
                      <a-switch checked-children="开" un-checked-children="关" :checked="val"/>
                  </section>
              </template>
        <template #action="val, data">
            <section class="action">
               <a  @click="$refs.Activedetails.open(data)" class="block" href="javascript:">详情</a>
               <a  @click="$refs.relatedServiceProviders.open(data)" class="block" href="javascript:">关联</a>
               <a  @click="$refs.createOrEdit.createOrEditData(data)" class="block" href="javascript:">编辑</a>
               <a style="color: red;"  class="block" @click="gOdelete(data)" href="javascript:">删除</a>
            </section>
        
        </template>
      </a-table>
      <CreateOrEdit ref="createOrEdit" @getData="getData"></CreateOrEdit>
	   <relatedServiceProviders ref="relatedServiceProviders" @getData="getData"></relatedServiceProviders>
	  <Activedetails ref="Activedetails" @getData="getData"></Activedetails>
    </a-card>
  </template>
  <script>
    import {tableMixins} from '@/utils/mixins'
    import {getActivityRelationVendor,getActivityUnbindVendor,getActivityBindVendor,getPageActivityDetail,getActivityDelete,getActivityEdit,getActivitytCreate,getActivityList, getPageChannelList, createChannel, setChannelStatus, setChannelSmsStatus } from '@/api/operationInfo/channel'
    import {cloneDeep} from 'lodash'
    import CreateOrEdit from './CreateOrEdit'
  import relatedServiceProviders from './relatedServiceProviders'
  import Activedetails from './Activedetails'
    export default {
      name: 'ChannelManagement',
      mixins: [tableMixins],
      components: {CreateOrEdit,relatedServiceProviders,Activedetails},
      data() {
        return {
          loading: false,
          name: '',
          pageNum: 1,
          rowsNum: 10,
          columns: [
            {dataIndex: 'code', title: '活动码', width: 160, scopedSlots: {customRender: 'code'}, align: 'center'},
            {dataIndex: 'channelName', title: '渠道商', width: 160, scopedSlots: {customRender: 'name'}, align: 'center'},
            {
              dataIndex: 'name',
              title: '活动名称',
              scopedSlots: {customRender: 'name'},
              width: 380,
              align: 'center'
            },
            {dataIndex: 'preferentialInfo', title: '优惠方式', scopedSlots: {customRender: 'preferentialInfo'}, align: 'center'},
            {dataIndex: 'createTime', title: '基本信息',scopedSlots: {customRender: 'createTime'}, align: 'center'},
            {dataIndex: 'isEnabled', title: '状态', scopedSlots: {customRender: 'isEnabled'}, align: 'center'},
            {title: '操作', scopedSlots: {customRender: 'action'}, width: 110, align: 'center'}
          ],
          data: []
        }
      },
      created() {
      
        this.getData()
      },
      methods: {
				gOdelete(e) {
				  // 删除操作
				  this.$confirm({
				    title: '提示',
				    content: `您确定删除${e.name}活动吗？`,
				    okText: '确定',
				    okType: 'danger',
				    cancelText: '取消',
				    onOk: () => {
				      getActivityDelete({ id: e.id }).then(() => {
				        this.$message.success('删除成功！')
				       this.search()
				      })
				    },
				  })
				},
        search() {
          this.pageNum = 1
          this.getData()
        },
        reset() {
          this.name = ''
          this.search()
        },
        getData() {
          this.loading = true
          const {name, pageNum, rowsNum} = this
          getActivityList({
            name: name ? name.trim() : undefined, rowsNum, pageNum
          }).then(res => {
            this.loading = false
            const {items, rowCount} = res
            this.data = items
            this.total = rowCount
          
          }).finally(() => {
            this.loading = false
          })
        }
      }
    }
  </script>
  <style lang="less" scoped>
    .full-name {
      color: #999;
    }
  
    .contact-con {
      display: inline-block;
      max-width: 100px;
      vertical-align: top;
    }
  
    .table-con {
      /deep/ .ant-table-thead > tr > th, /deep/ .ant-table-tbody > tr > td {
        padding: 8px;
      }
    }
    .enabled-con{
      position:relative;
      .enabled-mack{
        position: absolute;
        top:0;
        left:0;
        display: inline-block;
        width:100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
      }
    }
  </style>
  